<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <style>
        a {
            text-decoration: none;
            width: 20px;
            margin-left:30px;
        }

        a:link {
            color: lightgreen;
        }

        a:visited {
            color: lightskyblue;
        }

        a:hover {
            color: hotpink;
        }

        a:active {
            color: blue;
        }

        li {
            display: inline-block;
        }

        table tr td:nth-child(2) {
            color: blue;
        }

        table tr td:nth-child(3) {
            color: red;
        }

        table tr td:nth-child(4) {
            color: darkmagenta;
        }

        table tr td:nth-child(5) {
            color: azure;
        }

        table,
        td,
        th {
            border: 1px solid;
            border-color: rgba(0, 174, 255, 0.979);
        }

        tr:nth-child(2n+1) {
            background-color: cyan;

        }

        tr:nth-child(2n) {
            background-color: deepskyblue;

        }

        img {
            width: 350px;
            height: 210px;
            box-shadow: 8px 8px deepskyblue;
            border: 2px lightgreen solid;
            padding: 2px;
            margin: 10px;
            float: left;
        }

        div {
            width: 380px;
            height: 250px;
            float: left;
        }

        div p {
            color: lightskyblue;
            float: bottom;
            text-align: center;
        }

        footer div {
            width: 100%;
            height: 100%;
            margin-top: 30px;
            background-color: aqua;
            float: left;
        }

        footer {
            float: bottom;
        }
    </style>
</head>

<body>
    <header>
        <h1>header部分:</h1>
        <p>水平导航栏：</p>
        <ul>
            <li><a href="http://www.baidu.com/">百度</a></li>
            <li><a href="http://www.4399.com/">4399小游戏</a></li>
            <li><a href="https://www.bilibili.com">哔哩哔哩</a></li>
            <li><a href="http://www.iqiyi.com/">爱奇艺</a></li>
        </ul>
    </header>
    <main>
        <h1>main部分:</h1>
        <table style="margin:30px">

            <tr>
                <th>fruit:</th>
                <td>apple</td>
                <td>orange</td>
                <td>banana</td>
                <td>pear</td>
            </tr>
            <tr>
                <th>drink:</th>
                <td>milk</td>
                <td>juice</td>
                <td>coffee</td>
                <td>tea</td>
            </tr>
            <tr>
                <th>ballgame:</th>
                <td>basketball</td>
                <td>football</td>
                <td>baseball</td>
                <td>tennis</td>
            </tr>
            <tr>
                <th>hobby:</th>
                <td>listening</td>
                <td>running</td>
                <td>eating</td>
                <td>sleeping</td>
            </tr>

        </table>
        <div>
            <div>
                <img
                    src="https://tse1-mm.cn.bing.net/th/id/OIP-C.7POZoYmj5WmFJQn7o7w2igHaEo?w=295&h=184&c=7&r=0&o=5&dpr=2&pid=1.7" />
                <p>天然瀑布</p>
            </div>
        </div>
        <div>
            <img
                src="https://tse2-mm.cn.bing.net/th/id/OIP-C.OU64L4-I-bzNtMMIuDobEgHaFj?w=245&h=184&c=7&r=0&o=5&dpr=2&pid=1.7" />
            <p>彩虹桥</p>
        </div>
        <div>
            <img
                src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/01/ChMkJlbKxQGIYTrbAAbISUkP64YAALHPgCk4c0ABshh575.jpg" />
            <p>石头路</p>
        </div>

        <div>
            <img
                src="https://ts4.cn.mm.bing.net/th?id=OIP-C.OWjf53S03bHhciUkWl00TgHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2" />
            <p>粉红云田</p>
        </div>
        <div>
            <img
                src="https://ts1.cn.mm.bing.net/th?id=OIP-C.vYn3PxYVUF5ECx6ml1dvoAHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2" />
            <p>绿荫孤岛</p>
        </div>
        <div>
            <img
                src="https://ts1.cn.mm.bing.net/th/id/R-C.0c8bf36e099654aadaf5f127ef1a3f1b?rik=uHrB%2blGez03%2fAA&riu=http%3a%2f%2fi3.img.969g.com%2fdown%2fimgx2014%2f10%2f24%2f289_102445_a1cff.jpg&ehk=EeF%2fioqRM6NfQqkCgXw%2bwLvO1%2fxZgeZ2pof7ALNLGsg%3d&risl=&pid=ImgRaw&r=0" />
            <p>日落海</p>
        </div>
        <br />
        <br />

    </main>
    <footer>
        <div style="inline">
            <h1>foot部分:</h1>
            <p>这是此次web的作业</p>
        </div>
    </footer>

</body>

</html>